<template>
  <div>
    <el-dialog
      class="my_dialog"
      v-bind="$attrs"
      v-on="$listeners"
      v-draggable
      width="800px"
      :visible="visible"
      @open="onOpen"
      @close="onClose"
      :title="title"
      :close-on-click-modal="false"
    >
      <el-form
        ref="elForm"
        :model="formData"
        :rules="rules"
        size="medium"
        label-width="100px"
        :inline="true"
      >
        <el-form-item label="物料类型" prop="materialTypeID">
          <el-input
            v-model="parentName"
            placeholder="物料类型"
            clearable
            :style="{ width: '100%' }"
            readonly
            @click.native="visiblea = true"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="物料名称" prop="name">
          <el-input
            v-model="formData.name"
            placeholder="请输入物料名称"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="物料编号" prop="code">
          <el-input
            v-model="formData.code"
            placeholder="请输入物料编号"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="物料型号" prop="model">
          <el-input
            v-model="formData.model"
            placeholder="请输入物料编号"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="物料规格" prop="specification">
          <el-input
            v-model="formData.specification"
            placeholder="请输入物料编号"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="物料图号" prop="figureNumber">
          <el-input
            v-model="formData.figureNumber"
            placeholder="请输入物料编号"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="长" prop="sizeLength">
          <el-input
            v-model="formData.sizeLength"
            placeholder="请输入物料编号"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="宽" prop="sizeWidth">
          <el-input
            v-model="formData.sizeWidth"
            placeholder="请输入物料编号"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="高" prop="sizeHeight">
          <el-input
            v-model="formData.sizeHeight"
            placeholder="请输入物料编号"
            clearable
            :style="{ width: '100%' }"
          >
          </el-input>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="formData.status"
            placeholder="请选择状态"
            clearable
            :style="{ width: '100%' }"
          >
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.dictLabel"
              :value="Number(item.dictValue)"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="onClose">取消</el-button>
        <el-button type="primary" @click="handleConfirm">确定</el-button>
      </div>
    </el-dialog>


    <!--物料类型选择-->
    <div>
      <parentList ref="parentList" :visible.sync="visiblea" @Ok="parentListOk"/>
    </div>
  </div>
</template>
<script>
  import parentList from "../basic_materialType/parentList"
  import {getEntityById} from "../basic_materialType/materialType"
  export default {
  inheritAttrs: false,
  components: {parentList},
  props: ["title", "visible", "item"],
  data() {
    return {
      formData: {
        name: "",
        code: "",
        materialTypeID:"",
        model:"",
        specification:"",
        sizeLength:0,
        sizeWidth:0,
        sizeHeight:0,
        figureNumber:"",
        status:1001,
        remark:""
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入物料名称",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入物料名称",
            trigger: "blur",
          },
        ],
        materialTypeID: [
          {
            required: true,
            message: "请选择物料类型",
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: "请选择物料状态",
            trigger: "blur",
          },
        ],
      },
      statusOptions: [],

      // 物料类型选择框打开关闭控制
      visiblea: false,
      // 物料类型的名称 用于展示
      parentName: ''
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getDictText();
  },
  mounted() {},
  methods: {
     async getDictText() {
      let res = await this.getDicts("material_status");
      if (res.data != null) {
        this.statusOptions = res.data;
      }
      this.$nextTick(() => {
        if (this.item) {
          // 编辑
          this.formData = JSON.parse(JSON.stringify(this.item));
          // 是否是顶级类型 顶级类型没有上级类别
          if (this.formData.materialTypeID) {
            // 根据上级类型ID查询信息并赋值名称
            getEntityById({id:this.formData.materialTypeID}).then(res => {
              if (res.code === 200) {
                this.parentName = res.data.name;
              } else {
                this.$message.error("上级类别翻译异常，请联系管理员检查");
              }
            })
          } else {
            this.parentName = "";
          }
        }
      });
    },
    onOpen() {
      this.getDictText();
    },
    onClose() {
      this.$refs["elForm"].resetFields();
      this.parentName = "";
      this.close();
    },
    close() {
      this.$emit("update:visible", false);
    },
    handleConfirm() {
      let form = JSON.parse(JSON.stringify(this.formData));
      console.log(form);
      this.$refs["elForm"].validate((valid) => {
        if (!valid) return;
        this.$emit("Ok", form);
      });
    },
    // 子页面数据接收
    parentListOk(item) {
      this.formData.materialTypeID = item.id;
      this.parentName = item.name;
      this.visiblea = false;
    }
  },
};
</script>
<style>
</style>
